import { useRef, useState, useCallback } from "react"; // 添加缺失的 useCallback
import styles from './index.module.less'; // 添加样式表导入
import useChannelScroll from "@pages/home/channel/common/scroll";
import GuestChannel from "@pages/home/widgets/guestChannel";
import UpdateUserChannel from "@pages/home/widgets/updateUserChannel"
import { useTypedSelector } from "@store/index";
import { selectToken } from "@slice/credentials";
import UpdateGuestChannel from "@pages/home/widgets/updateGuestChannel/index";


import Slide, { SlideRef } from "@shared/slide"; // 根据代码片段存在该路径

// 定义组件的属性类型
type ChannelProps = {
    channels: string[];
};


export default function Channel({ channels }: ChannelProps) {
    const { scrollHandler, scrollContainerRef } = useChannelScroll();


    // 获取用户登录凭据
    const token = useTypedSelector(selectToken);
    const slideRef = useRef<SlideRef>(null);

    return (
        <Slide ref={slideRef} direction={"toRight"}>
            {token ? (
                <UpdateUserChannel slideRef={slideRef} />
            ) : (
                <UpdateGuestChannel slideRef={slideRef} />
            )}
        </Slide>
    );
}